import React, { Component } from "react";
import { Table } from "antd";

export default class App extends Component {
  constructor () {
    super();
    this.state = {
      columns: [
        {
          title: "日期",
          dataIndex: "data",
          key: "data",
          align:'center',
        },
        {
          title: '收款方式',
          children: [
            {
              title: '支付宝',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
            {
              title: '微信',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
            {
              title: '银行卡',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
            {
              title: '现金',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
          ],
          align:'center'
        },
        {
          title: "收款合计",
          dataIndex: "all",
          key: "all",
          align:'center'
        },
        {
          title: '退款方式',
          align:'center',
          children: [
            {
              title: '支付宝',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
            {
              title: '微信',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
            {
              title: '银行卡',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
            {
              title: '现金',
              dataIndex: 'Alipay',
              key: 'Alipay',
              align:'center'
            },
          ],
        },
        {
          title: "退款合计",
          dataIndex: "all",
          key: "all",
          align:'center'
        },
        {
          title: "实收金额",
          dataIndex: "all",
          key: "all",
        },
      ],
      dataSource: [
        {
          key: '1',
          data: 'John dsf',
          Alipay: 32,
          all: '0571-22098909',
        },
        {
          key: '2',
          data: 'gdjk',
          Alipay: 32,
          all: '0571-22098909',
        },
      ],
       data: [
        {
          Alipay: 32,
        },
        {
          Alipay: 32,
        },
        {
          Alipay: 32,
        },
       ]
    };
  }
  render () {
    const { columns, dataSource, data } = this.state
    return (
      <div className={'platform-set-list'}>
        <Table columns={columns} size="middle" bordered dataSource={dataSource} 
        summary={(pageData) => {
        let totalBorrow = 0;
        let totalRepayment = 0;
        pageData.forEach(({ borrow, repayment }) => {
          totalBorrow += borrow;
          totalRepayment += repayment;
        });
        return (
          <>
            <Table.Summary.Row align='center'>
              <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
              {
                data.map((item, index) => {
                  return (
                    <Table.Summary.Cell key={index} align='center'>
                      {item.Alipay}
                    </Table.Summary.Cell>
                  )
                })
              }
            </Table.Summary.Row>
          </>
        );
      }}/>
      </div>
    );
  }
}